<template>
    <div>
      <div class="header">
        <div class="tools">
          <div>
            <el-button @click="addBtn" type="success" icon="el-icon-circle-plus-outline" size="mini">{{$t("message.global.add")}}</el-button>
          </div>
        </div>
      </div>

      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="group"
          :label="$t('message.global.group')">
        </el-table-column>
        <el-table-column
          prop="unit"
          :label="$t('message.global.unit')">
        </el-table-column>
        <el-table-column
          prop="version"
          :label="$t('message.global.version')">
        </el-table-column>

        <el-table-column
          prop="profile"
          :label="$t('message.global.profile')">
        </el-table-column>

        <el-table-column
          prop="versionDescription"
          :label="$t('message.global.description')">
        </el-table-column>

        <el-table-column :label="$t('message.global.operation')" :width="380">
          <template slot-scope="scope">
            <el-button
              class="btn-modify" @click="showDetail(scope.row)" size="mini" icon="el-icon-view">{{$t('message.global.show')}}</el-button>
            <el-button
              type="danger" @click="removeDependency(scope.row)" size="mini" icon="el-icon-remove-outline">{{$t('message.config.removeDependencies')}}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="page-util">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="index"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

    </div>
</template>

<script>

    import SelectConfig from "./SelectConfig.vue";

    export default {
      components: {SelectConfig},
      name: "dependencies-list",
        data : function(){
          return {
            tableData: [{}],
            group : '',
            unit : '',
            version : '',
            profile : '',
            index : 1,
            total : 0,
            size : 10,
            selectConfigDialog : false,
          }
        },
        methods : {

          addBtn(){
            this.$router.push("/selectConfig?versionId=" + this.versionId);
          },
          loadData : function(){
            this.$get("/dependency/getDependencyList",{versionId : this.versionId,index : this.index, size : this.size}).then(data => (this.tableData = data.data , this.total = data.count));
          },
          handleSizeChange(value){
            this.size = value;
            this.index = 1;
          },
          handleCurrentChange(value){
            this.index = value;
          },
          resolve(){
            this.group = this.coordinate.group;
            this.unit = this.coordinate.unit;
            this.version = this.coordinate.version;
            this.profile = this.coordinate.profile;
          },
          showDetail(row){
            this.$router.push("/configDetails/" + row.versionId + "?group=" + row.group + "&unit=" + row.unit + "&version=" + row.version + "&profile=" + row.profile + "&versionId=" + row.versionId);
          },
          removeDependency(row){
            var dependencyId = row.versionId;

            this.$confirm(this.$t('message.config.confirm'), this.$t('message.global.prompt'), {
              confirmButtonText: this.$t('message.global.ok'),
              cancelButtonText: this.$t('message.global.cancel'),
              type: 'warning'
            }).then(() => {

              this.$get("/dependency/removeDependency?versionId=" + this.versionId + "&dependencyId=" + dependencyId).then(data => {
                  //success
                  this.loadData();
                  this.$message.success(this.$t('message.config.deleteSuccess'))
              })


            }).catch(() => {
              //cancel
            });


          }
        },
        watch : {
          coordinate(){
            this.resolve();
          },
          value(){
            this.resolve();
          },
          index : function(){
            this.loadData();
          },
          versionId : function(){
            this.resolve();
            this.loadData();
          }
        },
        mounted(){
          if(this.versionId != ''){
            this.resolve();
            this.loadData();
          }

        },
        props : ['coordinate','versionId']
    }
</script>

<style scoped>
  .header{margin-bottom: 2rem;}
  .tools{background-color: #f5f7fa;padding:10px 20px 10px 20px;border:1px solid #bbb1b1;border-radius:5px;display: flex;justify-content: space-between;}

  .page-util{margin:1rem;display: flex;flex-direction: row-reverse;}
</style>
